@extends('admin.main')

@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-3">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>部门</h5>
                        <div class="ibox-tools">
                            <button id="btnCreateDept" class="btn btn-primary btn-xs">新建</button>
                            <button id="btnRenameDept" class="btn btn-success btn-xs">编辑</button>
                            <button id="btnRemoveDept" class="btn btn-danger btn-xs">删除</button>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <ul id="zTreeDepartment" class="ztree"></ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>用户列表</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="m-b">
                            <a href="javascript:;" id="btnCreate" class="btn btn-warning"> <i class="fa fa-plus"></i>
                                新建用户
                            </a>
                            <a href="javascript:;" id="btnImport" class="btn btn-info m-l"> <i class="fa fa-file-excel-o"></i>
                                导入用户
                            </a>
                        </div>
                        <div id="tblDataList">
                            <p class="ibox-loading-31"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script id="tplDataList" type="text/html">
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>手机</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <%each data as row i%>
                <tr data-id="<%row.id%>">
                    <td><%row.id%></td>
                    <td><%row.username%></td>
                    <td><%row.realname%></td>
                    <td><%row.sex%></td>
                    <td><%row.email%></td>
                    <td><%row.mobile%></td>
                    <td>
                        <%if row.status==1 %>
                            <i class="fa fa-check-circle fa-lg text-success"></i>
                        <%else%>
                            <i class="fa fa-times-circle fa-lg text-danger"></i>
                        <%/if%>
                    </td>
                    <td><%row.created_at%></td>
                    <td>
                        <div class="btn-group">
                            <button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">
                                操作
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu pull-right">
                                <li>
                                    <a href="javascript:;" class="js-edit">
                                        <i class="fa fa-pencil-square fa-lg"></i>
                                        编辑信息
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="js-loginlog">
                                        <i class="fa fa-th-list fa-lg"></i>
                                        登录日志
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="js-resetpwd">
                                        <i class="fa fa-key fa-lg"></i>
                                        重置密码
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="javascript:;" class="js-del">
                                        <i class="fa fa-times-circle fa-lg"></i>
                                        删除
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <%/each%>
            </tbody>
        </table>
        <div class="text-center"><%#page_str%></div>
    </script>

    <script id="tplUserLoginLogList" type="text/html">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">登录日志</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>时间</th>
                                <th>来源</th>
                            </tr>
                        </thead>
                        <tbody>
                            <%each rows as row i%>
                            <tr data-id="<%row.id%>">
                                <td><%i+1%></td>
                                <td><%row.login_at%></td>
                                <td><%row.login_ip%></td>
                            </tr>
                            <%/each%>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </script>

    <script id="tplUploadFile" type="text/html">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">导入用户</h4>
                </div>
                <div class="modal-body">
                    <form id="formUpfile" method="post" enctype="multipart/form-data" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">模板文件</label>
                            <div class="col-sm-9">
                                <p class="form-control-static">
                                    <a href="{{asset('upload/users_template.xls')}}" target="_blank">[点击下载]</a>
                                </p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">选择文件</label>
                            <div class="col-sm-9">
                                <input name="file1" type="file" class="form-control" />
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-9 col-sm-offset-3">
                                <input type="hidden" name="dept_id" value="<%id%>" />
                                <button type="submit" class="btn btn-primary btn-w-m"> <i class="fa fa-upload"></i>
                                    立即导入
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>

    <script id="tplResetPassword" type="text/html">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">重置密码</h4>
                </div>
                <div class="modal-body">
                    <form id="formResetPassword" method="post">
                        <div class="form-group">
                            <label class="control-label">新密码</label>
                            <input type="password" name="password" class="form-control" required="" autofocus="" />
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <input type="hidden" name="id" value="<%id%>" />
                            <button class="btn btn-primary btn-w-m" type="submit">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>

    <script id="tplAddDeptPanel" type="text/html">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">创建部门</h4>
                </div>
                <div class="modal-body">
                    <form id="formCreateDept" method="post" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-md-3 control-label">上级部门</label>
                            <div class="col-md-9">
                                <p class="form-control-static"><%name%></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">部门名称</label>
                            <div class="col-md-8">
                                <input name="name" type="text" class="form-control" required="" autofocus="" />
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-md-9 col-md-offset-3">
                                <input type="hidden" name="f_id" value="<%id%>" />
                                <button class="btn btn-primary btn-w-m" type="submit"> 提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>

    <script id="tplRenameDeptPanel" type="text/html">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">编辑部门</h4>
                </div>
                <div class="modal-body">
                    <form id="formRenameDept" method="post" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-md-3 control-label">部门名称</label>
                            <div class="col-md-8">
                                <input type="text" name="name" value="<%name%>" class="form-control" required="" autofocus="" />
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-md-9 col-md-offset-3">
                                <input type="hidden" name="id" value="<%id%>" />
                                <input type="hidden" name="f_id" value="<%pId%>" />
                                <button class="btn btn-primary btn-w-m" type="submit"> 提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>

    <script id="tplAddUserPanel" type="text/html">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">新建用户</h4>
                </div>
                <div class="modal-body">
                    <form id="formAddUser" method="post" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">帐户</label>
                            <div class="col-sm-4">
                                <input type="text" name="username" class="form-control" required="" autofocus />
                            </div>
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-4">
                                <input type="text" name="realname" class="form-control" required="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-4">
                                <input type="password" name="password" class="form-control" required="" />
                            </div>
                            <label class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-4">
                                <input type="password" name="repassword" class="form-control" required="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-4">
                                <input type="email" name="email" class="form-control" />
                            </div>
                            <label class="col-sm-2 control-label">手机</label>
                            <div class="col-sm-4">
                                <input type="text" name="mobile" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">身份证号</label>
                            <div class="col-sm-5">
                                <input type="text" name="cardid" class="form-control" />
                            </div>
                            <div class="col-sm-2">
                                <select name="sex" class="form-control">
                                    <option value="男" selected>男</option>
                                    <option value="女">女</option>
                                    <option value="保密">保密</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <select name="status" class="form-control">
                                    <option value="1" selected>启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <input type="hidden" name="dept_id" value="<%id%>" />
                                <button class="btn btn-primary btn-w-m" type="submit">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>

    <script id="tplEditUserPanel" type="text/html">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">编辑用户</h4>
                </div>
                <div class="modal-body">
                    <form id="formEditUser" method="post" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">帐户</label>
                            <div class="col-sm-4">
                                <p class="form-control-static"><%username%></p>
                            </div>
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-4">
                                <input type="text" name="realname" value="<%realname%>" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-4">
                                <input type="email" name="email" value="<%email%>" class="form-control" />
                            </div>
                            <label class="col-sm-2 control-label">手机</label>
                            <div class="col-sm-4">
                                <input type="text" name="mobile" value="<%mobile%>" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">身份证号</label>
                            <div class="col-sm-5">
                                <input type="text" name="cardid" value="<%cardid%>" class="form-control" />
                            </div>
                            <div class="col-sm-2">
                                <select name="status" class="form-control">
                                    <option value="1"<%if status==1%> selected<%/if%>>启用</option>
                                    <option value="0"<%if status==0%> selected<%/if%>>禁用</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <select name="sex" class="form-control">
                                    <option value="男"<%if sex=='男'%> selected<%/if%>>男</option>
                                    <option value="女"<%if sex=='女'%> selected<%/if%>>女</option>
                                    <option value="保密"<%if sex=='保密'%> selected<%/if%>>保密</option>
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <input type="hidden" name="id" value="<%id%>" />
                                <button class="btn btn-primary btn-w-m" type="submit">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>
@endsection

@section('pageheader')
    <link href="{{cdn1('assets/zTree/css/myStyle/myStyle.css')}}" rel="stylesheet" />
@endsection

@section('pagescript')
    <script src="{{cdn1('assets/zTree/js/jquery.ztree.core-3.5.js')}}"></script>
    <script src="{{cdn1('assets/zTree/js/jquery.ztree.exedit-3.5.js')}}"></script>
    <script>
        $("#side-menu li[rel='entrust']").addClass("active")
            .find("ul").addClass("in")
            .find("li[rel='user']").addClass("active");

        seajs.use('models/entrustModel', function(entrustModel) {
            var selectedNode;
            var filter = {limit: 12, page: 1, keyword: '', dept_id: 0};
            var renderList = function() {
                $("#tblDataList").html('<p class="ibox-loading-31"></p>');
                entrustModel.getUserPageRows(filter, function(data) {
                    data.page_str = page(data.last_page, data.total, data.current_page);
                    $("#tblDataList").html(template('tplDataList', data));
                }, failure);
            };
            renderList();

            $("#tblDataList").delegate(".pagination a", "click", function() {
                filter.page = $(this).attr("rel");
                renderList();
            });

            $("#btnImport").on("click", function(){
                if(selectedNode == null){
                    failure('请先选中一个部门');
                    return false;
                }
                $("#modalDialog").html(template("tplUploadFile", selectedNode)).modal("show");
            });

            $("#modalDialog").delegate("#formUpfile", 'submit', function(){
                var file = this.file1.value;
                if (file == ""){
                    alert("请选择上传文件！");
                    return false;
                }
                if (file.lastIndexOf(".") == -1){
                    alert("文件类型不正确！");
                    return false;
                }
                var ext = file.substr(file.lastIndexOf(".") + 1).toLowerCase();
                if (ext != 'xls' && ext != 'xlsx'){
                    alert('无效的文件类型！');
                    return false;
                }
                var data = new FormData();
                data.append('dept_id', this.dept_id.value);
                data.append('file1', this.file1.files[0]);
                entrustModel.importUser(data, function(){
                    $("#modalDialog").html("").modal('hide');
                    renderList();
                }, failure);
                return false;
            });

            $("#tblDataList").delegate(".js-loginlog", "click", function(){
                var id = $(this).parents('tr').eq(0).data('id');
                entrustModel.getLoginlog({"id":id}, function(data){
                    $("#modalDialog").html(template("tplUserLoginLogList", data)).modal("show");
                }, failure);
            });

            $("#tblDataList").delegate(".js-resetpwd", "click", function(){
                var id = $(this).parents('tr').eq(0).data('id');
                $("#modalDialog").html(template("tplResetPassword", {"id":id})).modal("show");
            });

            $("#modalDialog").delegate("#formResetPassword", "submit", function(){
                entrustModel.updateUser($(this).serialize(), function(data){
                    $("#modalDialog").html("").modal('hide');
                    artInfo('<i class="fa fa-check-circle"></i> 密码修改成功');
                }, failure);
                return false;
            });

            $("#tblDataList").delegate('.js-del', 'click', function(e) {
                var id = $(this).parents('tr').eq(0).data('id');
                dialog({
                    content: '<i class="fa fa-info-circle"></i> 确定要删除此用户吗？',
                    ok: function() {
                        entrustModel.deleteUser({'id': id}, function() {
                            $(e.target).parents("tr").remove();
                        }, failure);
                    },
                    cancel: true
                }).showModal();
            });

            var zTreeOnClick = function(event, treeId, treeNode){
                do{
                    if(selectedNode == null){
                        break;
                    }
                    if(selectedNode.id == treeNode.id){
                        return false;
                    }
                }while(false);
                selectedNode = treeNode;
                filter.dept_id = treeNode.id;
                filter.page = 1;
                renderList();
            };

            var loadDepartmentsTree = function(){
                $.get("{{url('admin/department/ztree-rows')}}", null, function(data){
                    var setting = {
                        view: {dblClickExpand: false, selectedMulti: false},
                        data: {simpleData: {enable: true, rootPId: '0'}},
                        callback: {'onClick': zTreeOnClick}
                    };
                    var zNodes = new Array, nodeArr;
                    for(var i in data){
                        if(data[i].f_id == '0') {
                            nodeArr = {"id":data[i].id,"name":data[i].name,"pId":data[i].f_id,"open":true};
                        } else {
                            nodeArr = {"id":data[i].id,"name":data[i].name,"pId":data[i].f_id,"open":false};
                        }
                        zNodes.push(nodeArr);
                    }
                    $.fn.zTree.init($("#zTreeDepartment"), setting, zNodes);
                }).fail(failure);
            };
            loadDepartmentsTree();

            // 新建部门相关处理
            $("#btnCreateDept").on("click", function () {
                $("#modalDialog").html(template("tplAddDeptPanel", selectedNode)).modal("show");
            });

            $("#modalDialog").delegate("#formCreateDept", "submit", function(){
                $("#loadingMask").fadeIn();
                $.post("{{url('admin/department/create')}}", $(this).serialize(), function(data){
                    var treeObj = $.fn.zTree.getZTreeObj("zTreeDepartment");
                    var newNode = {"id":data.id, "name":data.name};
                    treeObj.addNodes(selectedNode, newNode);
                }).fail(failure);
                $("#modalDialog").html('').modal("hide");
                $("#loadingMask").fadeOut();
                return false;
            });

            // 编辑部门相关处理
            $("#btnRenameDept").on("click", function () {
                if (selectedNode == null) {
                    failure("请先选中一个部门");
                    return false;
                }
                $("#modalDialog").html(template("tplRenameDeptPanel", selectedNode)).modal("show");
            });

            $("#modalDialog").delegate("#formRenameDept", "submit", function(){
                if(this.name.value == selectedNode.name){
                    $("#modalDialog").html("").modal("hide");
                    return false;
                }
                $("#loadingMask").fadeIn();
                $.post("{{url('admin/department/rename')}}", $(this).serialize(), function(data){
                    var treeObj = $.fn.zTree.getZTreeObj("zTreeDepartment");
                    selectedNode.name = data.name;
                    treeObj.updateNode(selectedNode);
                }).fail(failure);
                $("#modalDialog").html('').modal("hide");
                $("#loadingMask").fadeOut();
                return false;
            });

            // 删除部门相关处理
            $("#btnRemoveDept").on("click", function () {
                //判断是否选中一个部门
                if (selectedNode == null) {
                    failure("请先选中一个部门");
                    return false;
                }
                dialog({
                    content: '<i class="fa fa-info-circle"></i> 确定要删除此部门吗？',
                    ok: function(){
                        $.post("{{url('admin/department/delete')}}", {'id': selectedNode.id}, function(){
                            var treeObj = $.fn.zTree.getZTreeObj("zTreeDepartment");
                            treeObj.removeNode(selectedNode);
                            selectedNode = null;
                        }).fail(failure);
                    },
                    cancel: true
                }).showModal();
            });

            $("#btnCreate").on("click", function () {
                if(selectedNode == null){
                    failure('请先选中一个部门');
                    return false;
                }
                $("#modalDialog").html(template("tplAddUserPanel", selectedNode)).modal("show");
            });

            $('#modalDialog').delegate('#formAddUser', 'submit', function(){
                if(this.password.value != this.repassword.value){
                    alert('确认密码有误！');
                    this.repassword.focus();
                    return false;
                }
                entrustModel.insertUser($(this).serialize(), function(data){
                    $("#modalDialog").html('').modal('hide');
                    renderList();
                }, failure);
                return false;
            });

            $("#tblDataList").delegate(".js-edit", "click", function(){
                var id = $(this).parents("tr").eq(0).data("id");
                entrustModel.getMemberInfo({"user_id":id}, function(data){
                    $("#modalDialog").html(template("tplEditUserPanel", data)).modal("show");
                }, failure);
            });

            $('#modalDialog').delegate('#formEditUser', 'submit', function(){
                entrustModel.updateUser($(this).serialize(), function(data){
                    renderList();
                    $("#modalDialog").html('').modal('hide');
                }, failure);
                return false;
            });
        });
    </script>
@endsection
